<script src="../../utils/post.js"></script>
<template>
  <div class="content-box">
   <div class="header">
     <div class="left">
     <el-button type="primary" @click="addOrder">
       新增
     </el-button>
     </div>
     <div class="right">
       请选择请假查询年份：
       <el-date-picker
           v-model="create_year"
           value-format="yyyy"
           type="year"
           placeholder="选择年">
       </el-date-picker>
       <el-button style="margin-left: 1em" type="info" @click="select">
       查询
       </el-button>
     </div>
     <el-dialog title="请假信息"
                width="50%"
                :before-close="handleDialogClose"
                :visible.sync="dialogFormVisible"
     >
       <el-form size="mini" ref="form" :rules="rules" :model="form" :label-width="formLabelWidth">
         <el-form-item label="员工部门" prop="dept_name">
           <el-input v-model="form.dept_name" :disabled="true"></el-input>
         </el-form-item>
         <el-form-item label="请假类型" prop="holidaytype_name">
           <el-select v-model="form.holidaytype_name" placeholder="请选择请假类型">
             <el-option v-for="item in typeList" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="请假开始时间" required>
           <el-col :span="11">
             <el-form-item prop="start_date">
               <el-date-picker
                   value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="选择日期"
                   v-model="form.start_date"
                   style="width: 100%;">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col class="line" :span="1">-</el-col>
           <el-col :span="11">
             <el-form-item prop="start_time">
               <el-select placeholder="选择时间" v-model="form.start_time" style="width: 100%;">
                 <el-option v-for="item in typeTime" :key="item" :label="item" :value="item"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-form-item>
         <el-form-item label="请假结束时间" required>
           <el-col :span="11">
             <el-form-item prop="end_date">
               <el-date-picker
                   value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="选择日期"
                   v-model="form.end_date"
                   style="width: 100%;">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col class="line" :span="1">-</el-col>
           <el-col :span="11">
             <el-form-item prop="end_time">
               <el-select placeholder="选择时间" v-model="form.end_time" style="width: 100%;">
                 <el-option v-for="item in typeTime" :key="item" :label="item" :value="item"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-form-item>
         <el-form-item label="请假原因"  prop="reason">
           <el-input
               type="textarea"
               :autosize="{ minRows: 3, maxRows: 5}"
               placeholder="请输入请假原因"
               v-model="form.reason"
           ></el-input>
         </el-form-item>
       </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="onSubmit">立即创建</el-button>
           <el-button @click="cancel">取消</el-button>
         </div>
     </el-dialog>
     <el-drawer
         size="80%"
         style="text-align: center;font-weight: bold"
         :destroy-on-close="true"
         title="请假申请流转信息"
         :visible.sync="drawer"
         :direction="direction"
         :before-close="handleClose">
       <div class="drawerContainer">
         <div class="head">
           <el-card shadow="hover">
             <div class="title">
               <div class="icon"></div>
               <span>请假详情</span>
             </div>
             <div class="containerBox">
               <el-table
                   stripe
                   border
                   size="mini"
                   :default-expand-all="true"
                   :data="tableDataDetail"
                   style="width: 100%">
                 <el-table-column type="expand" fixed>
                   <template slot-scope="props" >
                     <el-form label-position="left"   class="demo-table-expand">
                       <div>
                         <el-form-item label="姓名" style="width: 1116px">
                           <span>{{ props.row.user__name }}</span>
                         </el-form-item>
                       </div>
                       <div>
                         <el-form-item label="请假原因"  style="width: 1116px">
                           <span>{{ props.row.reason }}</span>
                         </el-form-item>
                       </div>
                       <div>
                         <el-form-item label="请假开始时间"  style="width: 1116px">
                           <span>{{ props.row.start_date+'--'+props.row.start_time}}</span>
                         </el-form-item>
                       </div>
                       <div>
                         <el-form-item label="请假结束时间"  style="width: 1116px">
                           <span>{{ props.row.end_date+'--'+props.row.end_time }}</span>
                         </el-form-item>
                       </div>
                     </el-form>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="id"
                     label="请假申请编号"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="user__username"
                     label="工号"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="user__name"
                     label="姓名"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="user__post__name"
                     label="岗位名称"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="user__boardingtime"
                     label="入职时间"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="user__persontype__name"
                     label="人员类别"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="dept__name"
                     label="部门"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="holidaytype__name"
                     label="请假类型"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <div slot="reference" class="name-wrapper">
                       <el-tag size="medium">{{ scope.row.holidaytype__name }}</el-tag>
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                     align="center"
                     label="请假开始时间"
                     width="130px"
                 >
                   <template slot-scope="scope">
                     <span>{{scope.row.start_date+' --'+scope.row.start_time}} </span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     align="center"
                     label="请假结束时间"
                     width="130px"
                 >
                   <template slot-scope="scope">
                     <span>{{scope.row.end_date+' --'+scope.row.end_time}}</span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="reason"
                     label="请假原因"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="leave_days"
                     label="请假天数"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <div slot="reference" class="name-wrapper">
                       <el-tag size="medium" type="success">{{ scope.row.leave_days }}</el-tag>
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="status"
                     label="状态"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="link"
                     align="center"
                     label="环节"
                     width="100px"
                 >
                   <template slot-scope="scope">
                     <span>{{link(scope.row.link)}}</span>
                   </template>
                 </el-table-column>
               </el-table>
             </div>
             <div class="title">
               <div class="icon"></div>
               <span>销假记录</span>
             </div>
             <div class="containerBox">
                 <el-table
                     stripe
                     border
                     size="mini"
                     :data="tableDataRecord"
                     style="width: 100%">
                   <el-table-column
                       prop="id"
                       label="销假记录编号"
                       align="center"
                   >
                   </el-table-column>
                   <el-table-column
                       prop="holidaytype__name"
                       label="销假类型"
                       align="center"
                   >
                     <template slot-scope="scope">
                       <el-tag>{{scope.row.holidaytype__name}}</el-tag>
                     </template>
                   </el-table-column>
                   <el-table-column
                       prop="description"
                       label="销假描述"
                       align="center"
                   >
                   </el-table-column>
                   <el-table-column
                       prop="days"
                       label="销假天数"
                       align="center"
                   >
                   </el-table-column>
                 </el-table>
             </div>
             <div class="title">
               <div class="icon"></div>
               <span>销假详情</span>
             </div>
             <div class="containerBox">
               <el-table
                   stripe
                   border
                   size="mini"
                   :data="tableDataTime"
                   style="width: 100%">
                 <el-table-column
                     prop="id"
                     label="销假详情编号"
                     align="center"
                 >
                 </el-table-column>
                 <el-table-column
                     label="开始时间"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <el-tag type="info">{{scope.row.start_date+'--'+scope.row.start_time}}</el-tag>
                   </template>
                 </el-table-column>
                 <el-table-column
                     label="结束时间"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <el-tag type="danger">{{scope.row.end_date+'--'+scope.row.end_time}}</el-tag>
                   </template>
                 </el-table-column>
               </el-table>
             </div>
             <div class="title">
               <div class="icon"></div>
               <span>销假材料</span>
             </div>
             <div class="containerBox">
               <div v-for="(item,index) in imageList" :key="index" class="itemBox">
                 <el-image
                     style="width: 200px; height: 200px"
                     fit="contain"
                     :src="base+'/tyjq/api/media/'+item.image"
                     :preview-src-list="srcList"
                 >
                 </el-image>
               </div>
             </div>
             <div class="title">
               <div class="icon"></div>
               <span>流转记录</span>
             </div>
             <div class="containerBox">
               <el-table
                   stripe
                   max-height="1500px"
                   border
                   size="mini"
                   :data="data_order"
                   style="width: 100%"
               >
                 <el-table-column
                     prop="create_date"
                     fixed
                     label="申请到达时间"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="end_date"
                     label="申请处理时间"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="link"
                     label="环节"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                   <template slot-scope="scope">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{transformProcedure(scope.row.link)}}
                      </span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="link_status"
                     label="完成情况"
                     align="center"
                 >
                   <template slot-scope="scope">
                      <span :style="{ color: scope.row.link_status ===true?'green':'red'}"
                      >
                        {{scope.row.link_status ===true?'已完成':'未完成'}}
                    </span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="handler__name"
                     label="处理人"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <div slot="reference" class="name-wrapper">
                       <el-tag size="medium">{{ scope.row.handler__name }}</el-tag>
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="desc"
                     label="处理意见"
                     align="center"
                     :show-overflow-tooltip="true"
                 >
                 </el-table-column>
                 <el-table-column
                     prop="result"
                     label="处理结果"
                     align="center"
                 >
                   <template slot-scope="scope">
                      <span :style="{ color: scope.row.result ===true?'green':'red'}"
                      >
                        {{scope.row.result ===true?'同意':(scope.row.result ===null?'':'驳回')}}
                    </span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="status"
                     label="申请状态"
                     align="center"
                 >
                   <template slot-scope="scope">
                     <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
                   </template>
                 </el-table-column>
               </el-table>
             </div>
           </el-card>
         </div>
       </div>
     </el-drawer>
   </div>
    <div class="body">
      <el-table
          :data="tableData"
          size="mini"
          stripe
          style="width: 100%"
          height="90%"
          highlight-current-row
          @current-change="handleCurrentChange"
          :default-sort = "{prop: 'id', order: 'descending'}"
          >
        <el-table-column
            fixed
            align="center"
            prop="id"
            sortable
            label="请假单号"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__username"
            label="工号"
            >
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__name"
            label="姓名"
            >
        <template slot-scope="scope">
<!--          <span style="font-weight: bold;font-family:'Microsoft YaHei';color: #333333">{{scope.row.user__name}}</span>-->
          <el-popover trigger="hover" placement="top">
            <p>部门: {{ scope.row.dept__name }}</p>
            <p>入职时间: {{scope.row.user__boardingtime ===null ? '暂无数据':scope.row.user__boardingtime}}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.user__name }}</el-tag>
            </div>
          </el-popover>
        </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="user__post__name"
            label="角色"
            >
        </el-table-column>
<!--        <el-table-column-->
<!--            align="center"-->
<!--            prop="user__boardingtime"-->
<!--            label="入职时间"-->
<!--            :show-overflow-tooltip="true"-->
<!--            >-->
<!--          <template slot-scope="scope">-->
<!--            {{scope.row.user__boardingtime ===null ? '暂无数据':scope.row.user__boardingtime}}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            align="center"
            prop="user__persontype__name"
            label="员工属性"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="dept__name"
            label="部门"
        >
          <template slot-scope="scope">
            <el-tag size="mini" effect="dark" style="background-color: #1890ff">{{scope.row.dept__name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="holidaytype__name"
            label="休假类型"
        >
          <template slot-scope="scope">
            <el-tag size="mini" :type="typeSelect(scope.row.holidaytype__name)" effect="plain">{{scope.row.holidaytype__name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="请假开始时间"
            width="130px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.start_date+' --'+scope.row.start_time}} </span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="请假结束时间"
            width="130px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.end_date+' --'+scope.row.end_time}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="reason"
            label="请假原因"
            align="center"
            :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="leave_days"
            label="请假天数"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="scope.row.status === true ? 'color:green':'color:red'">{{scope.row.status ===true ? '有效':'无效'}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="create_date"
            label="创建时间"
            align="center"
            :show-overflow-tooltip="true"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="link"
            align="center"
            label="环节"
            width="100px"
        >
          <template slot-scope="scope">
            <el-tag style="background-color: white;border: #1890ff 1px dotted">
                      <span :style="{ color: classObjectProcedure(scope.row.link)}"
                      >
                        {{link(scope.row.link)}}
                      </span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="170px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                icon="el-icon-more"
                type="success"
                @click="detail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePagination"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          :page-sizes="pagination.pageSizes"
          background
          layout="total,sizes ,prev, pager, next,jumper"
          :total="pagination.total">
      </el-pagination>
    </div>
    </div>
  </div>
</template>
<script>
import {holidayInfo, holidayRecords, holidayType} from "@/utils/holiday";
import {createOrder} from "@/utils/order";

export default {
  name: 'orderInfo',
  data() {
    return {
      base:'http://134.68.156.116:28881',
      imageList:[],
      srcList:[],
      data_order:[],
      tableDataRecord:[],
      tableDataTime:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      pagination:{
        currentPage:1,
        pageSizes:[5,10,15,20,50,100],
        pageSize:10,
        total:100
      },
      currentRow: null,
      drawer: false,
      create_year:'',
      direction: 'rtl',
      typeTime:[
          '上午',
          '下午'
      ],
      tableDataDetail:[],
      form:{
        dept_name:JSON.parse(localStorage.getItem('user')).dept,
        holidaytype_name:'',
        start_date:'',
        start_time:'',
        end_date:'',
        end_time:'',
        reason:'',
      },
      rules:{
        dept_name: [
          {
            required: true, message: '请输入员工部门', trigger: 'blur'
          }
        ],
        holidaytype_name:[
          {
            required: true, message: '请选择请假类型', trigger: 'blur'
          }
        ],
        start_date:[
          {
            required: true, message: '请选择请假开始日期', trigger: 'blur'
          }
        ],
        start_time:[
          {
            required: true, message: '请选择请假开始时间', trigger: 'blur'
          }
        ],
        end_date:[
          {
            required: true, message: '请选择请假结束日期', trigger: 'blur'
          }
        ],
        end_time:[
          {
            required: true, message: '请选择请假结束时间', trigger: 'blur'
          }
        ],
        reason: [
          {
            required: true, message: '请输入请假原因', trigger: 'blur'
          }
        ]
      },
      typeList:[],
      tableData:[]
    }
  },
  created() {
    let myDate = new Date()
    this.create_year = myDate.getFullYear()+''
    holidayType({}).then(res =>{
      if(res.code === '1'){
        let temp = []
        for(let i=0;i<res.data.length;i++){
          temp.push(res.data[i].name)
        }
        this.typeList = temp
      }
    })
    this.init()
  },
  mounted() {

  },
  methods: {
    init(){
       this.getList()
    },
    classObjectProcedure(link){
      if(link===2) {
        return 'orange'
      }else if(link===3){
        return 'brown'
      }else if(link===4){
        return 'red'
      }else if(link===5){
        return 'blue'
      }else if(link===6){
        return 'purple'
      }else{
        return 'green'
      }
    },
    transformProcedure(val){
      let list = [
        {
          id:1,
          label:'发起请假申请',
          value:1
        },
        {
          id:2,
          label:'部门正职审批',
          value:2
        },
        {
          id:3,
          label:'分管领导审批',
          value:3
        },
        {
          id:4,
          label:'总经理审批',
          value:4
        },
        {
          id:5,
          label:'销假审核',
          value:5
        },
        {
          id:6,
          label:'归档',
          value:6
        }
      ]
      return list.filter(ele=>(ele.value === val))[0].label
    },
    link(link){
      switch (link){
        case 1:
          return '发起请假申请'
          // eslint-disable-next-line no-unreachable
        break;
        case 2:
          return '部门正职审批'
          // eslint-disable-next-line no-unreachable
        break;
        case 3:
          return '分管领导审批'
          // eslint-disable-next-line no-unreachable
        break;
        case 4:
          return '总经理审批'
          // eslint-disable-next-line no-unreachable
        break;
        case 5:
          return '销假审核'
          // eslint-disable-next-line no-unreachable
        break;
        case 6:
          return '归档'
          // eslint-disable-next-line no-unreachable
        break;
        default:
          return '环节错误'
      }
    },
    typeSelect(type){
      switch (type){
        case '年休假':
          return 'success'
          // eslint-disable-next-line no-unreachable
          break;
        case '婚假':
          return 'danger'
          // eslint-disable-next-line no-unreachable
          break;
        case '产假':
          return 'warning'
          // eslint-disable-next-line no-unreachable
          break;
        case '病假':
          return 'info'
          // eslint-disable-next-line no-unreachable
          break;
        case '事假':
          return 'info'
          // eslint-disable-next-line no-unreachable
          break;
        default:
          return 'success'
      }
    },
    select(){
      console.log(this.create_year)
      console.log(typeof(this.create_year) )
      this.getList()
    },
    getList(){
      let params = {
        create_year:this.create_year,
        page_number:this.pagination.currentPage,
        page_size:this.pagination.pageSize
      }
      holidayRecords(params).then(res=>{
        if(res.code==='1'){
          this.$message.success(res.message)
          this.tableData = res.data
          this.pagination.total = res.total_count
          this.pagination.currentPage = res.page_number
          this.pagination.pageSize = res.page_size
        }else{
          this.$message.error(res.message)
        }
      })
    },
    addOrder(){
       this.dialogFormVisible = true
    },
    handleDialogClose(done){
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            this.cancel()
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            this.srcList = []
            this.imageList = []
            this.data_order = []
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    detail(id){
      this.drawer = true
      let  params = {
        holiday_id:id
      }
      holidayInfo(params).then(res=>{
        if(res.code === '1'){
           this.$message.success(res.message)
           this.tableDataDetail = res.holiday
           this.data_order = res.orders
           this.imageList = res.images
           this.tableDataRecord =res.leave_records
           this.tableDataTime =res.leave_time
           for(let i= 0;i<this.imageList.length;i++){
            this.srcList.push(this.base+'/tyjq/api/media/'+this.imageList[i].image)
           }
        }else{
          this.$message.error(res.message)
        }
      })
    },
    onSubmit(){
       this.$refs.form.validate((valid)=>{
         if(valid){
           // alert('submit!')
           console.log('this.form',this.form)
           createOrder(this.form).then(res=>{
             if (res.code === '1'){
               this.$message.success(res.message)
               this.cancel()
               this.dialogFormVisible = false
             }else{
               this.$message.error(res.message)
             }
           })
         }
       })
    },
    cancel(){
       this.form = {}
       this.form.dept_name = JSON.parse(localStorage.getItem('user')).dept
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleSizeChange(pageSize){
       this.pagination.pageSize = pageSize
       this.getList()
    },
    handleCurrentChangePagination(currentPage){
       this.pagination.currentPage = currentPage
       this.getList()
    }
  }
}
</script>
<style lang="scss">
.content-box{
  height: 100%;
  .header{
    display: flex;
    justify-content: space-between;
    .left{

    }
    .right{

    }
    .drawerContainer{
      //text-align: center;
      color: #fff;
      padding: 10px;
      font-size: 25px;
      .head{
        .title {
          display: flex;
          width: 100%;
          font-weight: 600;
          font-size: 15px;
          line-height: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #e8e8e8;
          margin-bottom: 15px;
          .icon {
            width: 5px;
            height: 15px;
            background-color: rgb(146, 198, 222);
            margin-right: 5px;
          }
        }
        .containerBox {
          display: flex;
          justify-content: flex-start;
          //align-items: center;
          flex-wrap: wrap;
          margin-bottom: 16px;
          box-sizing: border-box;
          padding: 0 10px;
          .itemBox1 {
            width: 33.3%;
            margin-bottom: 15px;
            font-size: 14px;
            .itemLeft1 {
              color: rgba(0, 0, 0, 0.55);
            }
            .itemRight1 {
              color: rgba(0, 0, 0, 0.95);
            }
          }
          .itemBox {
            width: 33.3%;
            margin-bottom: 15px;
            font-size: 14px;
            .itemLeft {
              color: rgba(0, 0, 0, 0.55);
            }
            .itemRight {
              color: rgba(0, 0, 0, 0.95);
            }
          }
        }
      }
    }
    .line{
      color: #8c939d;
      margin-left: 16px;
    }
  }
  .body{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .block{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}

</style>
<style>
.demo-table-expand {
  /*font-size: 0;*/
  /*margin-left: 15em;*/
//width: 75%;
//margin: 0 12.5%;
  margin: 20px;
}
.demo-table-expand label {
  width: 11em;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
//padding: 1em;
  margin-right: 0;
  margin-bottom: 0;
}
</style>
